<template>
  <view
    class="x-fs x-flexp-ai"
    :style="{width}"
    @click="doClick"
  >
    <view
      class="x-mr-sm x-line-1"
      :style="{color}"
    >
      {{ title }}
    </view>
    <view>
      <!-- #ifndef XT_PC -->
      <u-icon
        name="arrow-down"
        :color="color"
      />
      <!-- #endif -->
      <!-- #ifdef XT_PC -->
      <i
        class="el-icon-arrow-down"
        :style="{color, fontSize: size}"
      /> 
      <!-- #endif -->
    </view>
  </view>
</template>
<script>
  import { initLocation, getSelectedLocation } from '../location/locations'
  export default {
    props: {
      width: {
        type: String,
        default: '180rpx',
      },
      color: {
        type: [String,null],
        default: '#ffffff',
      },
      size: {
        type: String,
        default: ()=>uni.$x.theme.uniFontSizeSm
        ,
      }
    },
    data() {
      return {
        selectedLocation: {}
      }
    },
    computed: {
      title() {
        if(!this.selectedLocation.title) return '定位中'
        return this.selectedLocation.title.replace(this.selectedLocation.city,'').replace(this.selectedLocation.district,'')||this.selectedLocation.title
      }
    },
    mounted() {
      uni.$on('xone-location-data', this._onXOneLocationData=()=>{
        this.selectedLocation = getSelectedLocation()
        this.$emit('change')
      })
      initLocation({refresh: false, poi: true, save: true}).then(()=>{
        this.selectedLocation = getSelectedLocation()
      })
    },
    destroyed() {
      uni.$off('xone-location-data', this._onXOneLocationData)
    },
    methods: {
      doClick() {
        uni.$x.navigator.push('/uni_modules/xone/libs/locationv/locations')
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
